<template>
  <div>
    <b-container fluid class="banner d-none d-sm-block"></b-container>
    <b-container fluid class="d-none d-sm-block">
      <b-row align-h="center">
        <b-col lg="11">
          <div class="content-nav">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item href="/">首页</a-breadcrumb-item>
              <a-breadcrumb-item href="/">关于我们</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11">
          <div id="about-us-intro-wrapper">
            <div id="about-us-intro-text">
              <p class="intro-title">魁牛——自购省钱 分享赚钱</p>
              <p class="intro-content">
                我们旨在赋能企业改变营销、销售和经营的方式。我们为商家、品牌及其他企业提供基本的互联网基础设施以及营销平台，
                让其可借助互联网的力量与用户和客户互动。我们的业务包括核心电商、云计算、数字媒体和娱乐以及创新项目和其他业务。
                我们并通过子公司菜鸟网络及所投资的关联公司口碑，参与物流和本地服务行业，同时与蚂蚁金融服务集团有战略合作，
                该金融服务集团主要通过中国领先的第三方网上支付平台支付宝运营。
              </p>
            </div>
            <b-container id="about-us-intro-banner" fluid>
              <b-row class="justify-content-between align-items-center">
                <b-col md="6">
                  <div class="intro-banner">
                    <p class="intro-banner-title">购物返利</p>
                    <p class="intro-banner-content">
                      我们每天促进数以万计的商业和社交互动，包括用户和用户之间、消费者和商家之间以及企业和企业之间的互动。
                    </p>
                  </div>
                </b-col>
                <b-col md="6">
                  <div class="intro-banner">
                    <p class="intro-banner-title">分享赚钱</p>
                    <p class="intro-banner-content">
                      我们向客户提供商业基础设施和数据技术，让他们建立业务、创造价值，并与我们的其他生态系统参与者共享成果。
                    </p>
                  </div>
                </b-col>
                <b-col md="6">
                  <div class="intro-banner">
                    <p class="intro-banner-title">物美价廉</p>
                    <p class="intro-banner-content">
                      我们致力拓展产品和服务范畴，让魁牛成为我们客户日常生活的重要部份。
                    </p>
                  </div>
                </b-col>
                <b-col md="6">
                  <div class="intro-banner">
                    <p class="intro-banner-title">自创严选</p>
                    <p class="intro-banner-content">
                      魁牛致力于通过“精选”供应链策略以及极具社交属性的营销策略，聚焦商品的极致性价比，帮助千万消费者以“批发价”买到全球好货。
                    </p>
                  </div>
                </b-col>
              </b-row>
            </b-container>
            <b-container id="about-us-intro-circle" fluid>
              <b-row class="justify-content-between" no-gutters>
                <b-col cols="3">
                  <a-avatar :size="192" src="/images/logo-square.png" />
                </b-col>
                <b-col cols="3">
                  <a-avatar :size="192" src="/images/logo-square.png" />
                </b-col>
                <b-col cols="3">
                  <a-avatar :size="192" src="/images/logo-square.png" />
                </b-col>
                <b-col cols="3">
                  <a-avatar :size="192" src="/images/logo-square.png" />
                </b-col>
              </b-row>
            </b-container>
            <b-container id="about-us-intro-history" fluid>
              <b-row class="justify-content-center" no-gutters>
                <b-col cols="11">
                  <p class="about-us-intro-history-title">
                    我们的发展历程
                  </p>
                  <p class="about-us-intro-history-content">
                    魁牛是一家由社交驱动的精品会员电商，为用户提供美妆个护、手机数码、母婴玩具、水果生鲜等全品类精选商品。<br />
                    魁牛致力于通过“精选”供应链策略以及极具社交属性的营销策略，聚焦商品的极致性价比，帮助千万消费者以“批发价”买到全球好货。
                  </p>
                </b-col>
              </b-row>
              <b-row
                id="about-us-intro-history-stat"
                class="justify-content-between"
                no-gutters
              >
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="2017" suffix="年" desc="公司成立时间" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="158" suffix="万" desc="沉淀用户" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="3240" suffix="万" desc="年营业额" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="180" suffix="+" desc="覆盖产品" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="110" suffix="+" desc="深度合作品牌" />
                </b-col>
              </b-row>
            </b-container>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import AboutUsStat from '@/components/AboutUsStat';

export default {
  components: {
    AboutUsStat,
  },
  layout: 'staticBanner',
};
</script>

<style lang="scss" scoped>
.banner {
  height: 330px;
  background-image: url('/images/header-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
</style>

<style lang="scss" scoped>
.content-nav {
  margin: 24px 12px 0px;
}
#about-us-intro-wrapper {
  margin-top: 24px;
  text-align: center;
  p {
    margin: 0px;
  }
  .intro-title {
    font-size: 20px;
    line-height: 72px;
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
    font-weight: 650;
    text-decoration: none;
  }
  .intro-content {
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    text-decoration: none;
    font-size: 16px;
    line-height: 32px;
    @include media-breakpoint-down(xs) {
      font-size: 14px;
      line-height: 24px;
    }
  }
  .intro-banner {
    border-left-width: 5px;
    border-left-color: rgb(228, 228, 228);
    border-left-style: solid;
    background-color: rgba(242, 242, 242, 1);
    padding: 15px;
    margin-bottom: 10px;
  }
  .intro-banner-title {
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
    font-weight: 650;
    text-decoration: none;
    font-size: 18px;
    color: #999999;
    text-align: left;
    line-height: 28px;
  }
  .intro-banner-content {
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
    color: #999999;
    text-align: left;
    line-height: 28px;
  }
}
#about-us-intro-banner {
  margin-top: 40px;
  margin-bottom: 20px;
}
#about-us-intro-circle {
  .ant-avatar {
    @include media-breakpoint-down(sm) {
      width: 128px !important;
      height: 128px !important;
    }
    @include media-breakpoint-down(xs) {
      width: 64px !important;
      height: 64px !important;
    }
  }
}
.about-us-intro-history-title {
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
  font-weight: 650;
  text-decoration: none;
  color: #999999;
  font-size: 20px;
  line-height: 72px;
}
.about-us-intro-history-content {
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-weight: 400;
  text-decoration: none;
  color: #999999;
  font-size: 16px;
  line-height: 32px;
  text-align: left;
}
#about-us-intro-history-stat {
  background-color: rgba(255, 187, 18, 1);
  padding-top: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  > div {
    margin-bottom: 30px;
  }
}
#about-us-intro-history-timeline {
  margin-top: 20px;
}
</style>
